<template>
  <div v-show="true">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <router-link to="/library" class="caidan"><b><el-menu-item index="0" class="caidan">图书中心</el-menu-item></b></router-link>
      <router-link to="/personal" class="caidan"><b><el-menu-item index="1" class="caidan" @click="judgment">个人中心</el-menu-item></b></router-link>
      <router-link to="/Lend" class="caidan"><b><el-menu-item index="2" class="caidan">借书记录</el-menu-item></b></router-link>
      <b><el-menu-item class="caidan2">欢迎: {{userName}}</el-menu-item></b>
      <b><el-menu-item class="caidan3" @click="delUser">退出</el-menu-item></b>
    </el-menu> 
    <div v-show="!tiaozhuan">
      <router-view></router-view>
    </div>
  </div>
  <div v-show="tiaozhuan">
      <Library></Library>
  </div>
</template>

<script>
  import axios from 'axios'
  import emitter from './utils/event-bus'
  import Library from './components/Book/Library.vue'
  export default {
      data(){
        return {
          // 获取登录id的用户名
          userName: '',
          realUser:[],
          id : '',
          zhanshi : false,
          // 当点击其他页面时隐藏当前页面
          tiaozhuan: true
        }
      },
      mounted(){
        emitter.on('submitForm',this.getrealId)
      },
      methods : { 
        // 根据id获取姓名
        getrealId(realId){
          axios.get('/User/' + realId).then(
            response => {
              this.realUser[0] = response.data[0]
              this.userName = this.realUser[0].name
              this.id = this.realUser[0].id
            },
            error => {
              console.log(error.message)
            }
          )
        },
        // 点击退出，然后删除id和userName
        delUser(){
          this.userName = '',
          axios.get('/getCurrentId/id?id=0').then()
          this.$notify({
          title: '退出成功',
          message: '操作成功',
          type: 'success'
          }); 
          emitter.emit('delUser',this.id)
          emitter.emit('delUser')
        },
        // 判断是否登录
        judgment(){
          if(this.userName != ''){
              emitter.emit('judgment',this.zhanshi)
          }else{
              emitter.emit('judgment',!this.zhanshi)
          }
        
        },
        // 触发事件隐藏当前页面展示
        handleSelect(){
          this.tiaozhuan = false
        }

      },
    components:{Library}
  }
   


</script>

<style scoped>
  .juzhong{
    text-align: center;

  }
  .caidan{
    font-size: 20px;
    float:top;
    text-decoration:none;
  }
  .caidan2{
    position: relative;
    left:800px;
    right:auto;
    width:auto;
  }
  .caidan3{
    position: relative;
    left:800px;
    right:auto;
    width:auto;
  }
  
</style> 
